<template>
  <div>
    <el-button
      style="margin-top: 10px; margin-left: 10px"
      type="info"
      circle
      size="mini"
      icon="el-icon-d-arrow-left"
      @click="goBack"
    />
    {{ name }}
    <el-menu
      style="margin-top: 10px"
      mode="horizontal"
      :default-active="activeIndex"
      @select="handleSelect"
    >
      <el-menu-item
        v-for="item in subjects"
        :key="item.id"
        :index="item.id.toString()"
        >{{ item.name }}</el-menu-item
      >
    </el-menu>
    <div id="myChart" :style="{ width: '800px', height: '500px' }"></div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import subjectApi from "@/api/subject/index";
import gradeApi from "@/api/grade/index";
let accounts = [];
let myChart = {};

export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      subjects: [],
      activeIndex: "",
      name: "", //grade班级的名称
    };
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleSelect: async function (subjectId) {
      const res = await gradeApi.getStatictics(
        subjectId,
        this.$route.query.gradeId
      );
      accounts = res.data.accounts
      this.name = this.$route.query.name;
      this.drawLine(res.data, subjectId);
    },
    drawLine(params, subjectId) {
      let option = {};
      option.xAxis = {};
      option.xAxis.data = params.names;
      option.yAxis = {};
      option.series = [];
      option.series.push({ type: "bar", data: params.scores });
      if (Object.keys(myChart).length != 0) {
        myChart.dispose();
      }

      myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.setOption(option);
      let _this = this;
      myChart.on("click", function (params) {
        // 在用户点击后控制台打印数据的名称
        _this.name = params.name;
        _this.showDetail(accounts[params.dataIndex], subjectId);
      });
    },
    /**
     * 以折线图显示某个学员的分数变化情况
     */
    showDetail(userId, subjectId) {
      gradeApi
        .showDetail(userId, subjectId, this.$route.query.gradeId)
        .then((res) => {
          console.log(res.data);
          let option = {};
          option.xAxis = { type: "category" };
          option.xAxis.data = res.data.dateTimes;
          option.yAxis = { type: "value" };
          option.series = [];
          option.series.push({ type: "line", data: res.data.results });
          if (Object.keys(myChart).length != 0) {
            myChart.dispose();
          }
          console.log(option);

          myChart = this.$echarts.init(document.getElementById("myChart"));
          myChart.setOption(option);
        });
    },
    goBack() {
      this.$router.push("/user/class");
    },
    getSubjects(params) {
      subjectApi.getAll().then((res) => {
        // if (params == "PA") {
        //   this.subjects = res.data.filter(
        //     (i) => i.name != "R3M5航空涡轮发动机"
        //   );
        // } else if (params == "TA") {
        //   this.subjects = res.data.filter(
        //     (i) => i.name != "R3M6航空活塞发动机"
        //   );
        // }
        this.subjects = res.data;
        this.activeIndex = this.subjects[0].id.toString();
        gradeApi
          .getStatictics(this.activeIndex, this.$route.query.gradeId)
          .then((res) => {
            accounts = res.data.accounts;
            this.drawLine(res.data, this.activeIndex);
          });
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    let type = this.$route.query.name.substring(
      this.$route.query.name.length - 3,
      this.$route.query.name.length - 1
    );
    this.name = this.$route.query.name;
    this.getSubjects(type);
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>
<style scoped></style>
